<!DOCTYPE html>
<html>
  <head>
    <title>12306订单详情</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>

  <body>
    <div id="app" :style="showStyle">
      <h1>订单详情</h1>
      <div class="container">
        <!-- 车次信息 -->
        <div class="ticket-info">
          <div class="start">
            <div class="time">14:11</div>
            <div class="origin">西安北<span>&gt;</span></div>
          </div>
          <div class="train-info">
            <div class="train-number">D1937<span>&gt;</span></div>
            <div class="station-type">经停站</div>
            <div class="train-duration">历时3时29分</div>
          </div>
          <div class="end">
            <div class="time">17:40</div>
            <div class="destination">成都东<span>&gt;</span></div>
          </div>
        </div>
        <!-- 发车时间 -->
        <div class="train-date">
          <span class="start-date">发车时间：2023.09.30 星期六</span>
          <span class="expiration-date">车票当日当次有效</span>
        </div>
        <!-- 改签退票 -->
        <div class="btn-wrap">
          <button>改签</button>
          <span>|</span>
          <button>退票</button>
        </div>
        <!-- 乘车人列表 -->
        <div class="passenger-list">
          <div class="passenger-info" v-for="item in orderInfo.passengers">
            <h3 class="passenger">
              <div class="passenger-name">
                {{item.pname}}
                <span class="passenger-type"
                  >{{item.isAdult?'成人票':'儿童票'}}</span
                >
              </div>
              <div class="seat-info">
                <span class="seat-type" v-if="item.seatType!==2">{{item.seatType===1?"靠窗":"过道"}}</span
                >{{item.seat}}
              </div>
            </h3>

            <div class="seat-price">
              <div class="passenger-passport">中国居民身份证</div>
              <div class="price">￥{{item.price}}</div>
            </div>
            <div class="status">
              <div class="ticket-status">已出站</div>
              <div class="illustrate">退改说明</div>
            </div>
          </div>
        </div>
      </div>
      <div class="tip">🔔 订单信息查询有效期限为30日</div>
    </div>
    <script src="./js/vue.js"></script>
    <script>
      // TODO:阅读代码，根据提供的订单信息数据，通过学习的Vue指令将页面渲染成目标效果
      // DATA:数据字段说明
      /**
       *  startTime： 发车时间
       *  endTime： 到站时间
       *  origin： 发车站
       *  destination：目的地
       *  trainNumber：车次
       *  trainDate：发车日期
       *  stationType：车站类型(1为始发站,2为经停站)
       *  duration：历时
       *  rebook：能否改签
       *  cancellation:能否退票
       *  passengers:乘车人列表
       *  pid：乘车人ID
       *  pname：乘车人姓名
       *  isAdult：是否成年
       *  seat：座位
       *  price：票价
       *  seatType:作为类型(1是靠窗，2是中间，3是过道)
       */
      const app = new Vue({
        el: "#app",
        data: {
          // 防止渲染闪烁
          showStyle: "display:block;",
          orderInfo: {
            startTime: "14:11",
            endTime: "17:40",
            origin: "西安北",
            destination: "成都东",
            trainNumber: "D1937",
            trainDate: "2023.09.30 星期六",
            stationType: 2,
            duration: "3时29分",
            rebook: false,
            cancellation: true,
            passengers: [
              {
                pid: "0001",
                pname: "王大锤",
                isAdult: true,
                seat: "二等座 04车 11A号",
                price: 263,
                seatType: 1,
              },
              {
                pid: "0002",
                pname: "李二狗",
                isAdult: false,
                seat: "二等座 04车 11B号",
                price: 263,
                seatType: 2,
              },
              {
                pid: "0003",
                pname: "张三疯",
                isAdult: true,
                seat: "二等座 04车 11B号",
                price: 263,
                seatType: 3,
              },
            ],
          },
        },
      });
    </script>
  </body>
</html>
